<template>
  <div class="tabel-bg-view" v-if="MSDetailTabelCompontensFlag">
    <div class="tabel-setting-view">
      <div class="title">
        <p>{{ $t("message.dialog.setTabeltitle") }}</p>
        <i class="el-icon-close" @click="CloseTabelDialogFun"></i>
      </div>
      <el-table ref="singleTable" :data="tabelColumnData" style="width: 100%" border :header-cell-style="{
        color: 'rgba(0, 0, 0, 0.85)',
        fontSize: '14px',
        textAlign: 'left',
        fontWeight: 'bold',
        padding: 0,
        height: '32px',
        background: '#F5F5F5',
      }" :cell-style="{
        color: 'rgba(96,98,102,1)',
        fontSize: '14px',
        textAlign: 'left',
        padding: 0,
        height: '32px',
      }" :row-style="{
        color: 'rgba(96,98,102,1)',
        fontSize: '13px',
        textAlign: 'left',
        padding: 0,
        height: '32px',
      }" highlight-current-row :height="tableHeight">
        <!-- @selection-change="handleSelectionChange" -->
        <el-table-column :label="$t('message.dialog.isShow')" width="110">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isShow"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column :label="$t('message.dialog.isFlex')" width="110">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isFlex"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column :label="$t('message.dialog.objectName')">
          <template slot-scope="scope">
            <p class="hideTextView" :title="scope.row.keyName">
              {{ scope.row.keyName }}
            </p>
          </template>
        </el-table-column>
        <el-table-column :label="$t('message.dialog.Size')" width="110">
          <template slot-scope="scope">
            <el-input type="number" inputmode="decimal" v-model="scope.row.width"
              @input="scope.row.width = $setMyNum(scope.row.width, '3 - 0')"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <div class="right-btn-view">
          <el-button @click="CloseTabelDialogFun">Cancel</el-button>
          <el-button type="primary" class="bg-btn" @click="submitTabelConfig">OK</el-button>
        </div>
        <el-button class="left-button" style="transform: translateX(-60px);"
          @click="getOfferHeaderObjctlApi('empty')">初期値に戻す</el-button>
        <el-button class="left-button" @click="allChange">{{ $t('message.allshowTiele') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getLocalStorage } from "../../../utils/storage";
import {
  getHeaderConfig,
  setHeaderConfig,
  getOfferHeaderObjctl,
} from "../../../api/api";
import eventBus from "../../../eventBus/bus";
export default {
  props: {
    MSDetailTabelCompontensFlag: Boolean,
  },
  name: "TabelCompontens",
  data() {
    return {
      tableHeight: 388,
      tabelColumnData: [],
      tabelTitle: [],

      userName: getLocalStorage("userName"),
    };
  },
  components: {},
  watch: {},
  methods: {
    // handleSelectionChange(val) {},
    CloseTabelDialogFun() {
      this.$emit("CloseMSDetailTabelDialog");
    },
    //保存
    submitTabelConfig() {
      let postData = [];
      this.tabelColumnData.forEach((Item) => {
        postData.push({
          index: Item.index,
          isShow: Item.isShow,
          isFlex: Item.isFlex,
          width: parseInt(Item.width),
        });
      });
      let dataJson = {
        account: this.userName,
        formID: "AM330001",
        headers: postData,
      };
      setHeaderConfig(dataJson)
        .then((res) => {
          console.log(dataJson)
          if (res.data.code != 0) {
            return;
          }

          eventBus.$emit("LoadMSDetailTabelData");
        })
        .finally(() => {
          this.CloseTabelDialogFun();
        });
    },
    getHeaderConfigApi(Account) {
      let dataJson = {
        Account,
        formID: "AM330001",
        MacType:
          this.$store.state.macType == "" ? 0 : this.$store.state.macType
      };
      getHeaderConfig(dataJson).then((res) => {
        if (res.data.code != 0) {
          this.tabelColumnData = [];
        }
        this.tabelColumnData = [];

        res.data.data.forEach((item, index) => {
          this.tabelColumnData.push({
            isFlex: item.isFlex,
            isShow: item.isShow,
            width: item.width,
            keyName: this.tabelTitle[index],
            index: item.index,
          });
        });
      });
    },
    getOfferHeaderObjctlApi(Account = this.userName) {
      let dataJson = {
        language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
        formID: "AM33000",
        cntlName: "Spread2",
        Account
      };
      getOfferHeaderObjctl(dataJson).then((res) => {
        this.tabelTitle = res.data.data;
        this.getHeaderConfigApi(Account);
      });
    },
    // 全选
    allChange() {
      this.tabelColumnData.forEach((i) => {
        i.isShow = true;
      });
    }
  },
  created() {
    this.getOfferHeaderObjctlApi();
  },
  mounted() { },
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.tabel-bg-view {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 666;

  ::v-deep .el-input__inner {
    border: 0 none;
    height: 32px;
    background: transparent;
    padding: 0;
  }

  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
}

.tabel-setting-view {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 492px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
    0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);

  .title {
    // width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    justify-content: space-between;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);

    .el-icon-close {
      cursor: pointer;
    }
  }

  .bottom {
    padding: 0 12px;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
  }
}

.left-button {
  width: 112px;
  height: 32px;
  // background: #ffffff;
  // border-radius: 4px;
  // border: 1px solid #d9d9d9;
}

.right-btn-view {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  button {
    width: 112px;
    height: 32px;
    // background: #ffffff;
    // border-radius: 4px;
    // border: 1px solid #d9d9d9;
  }

  .bg-btn {
    margin-left: 16px;
    width: 86px !important;
    // background: #106ebe;
    // color: #fff;
  }
}
</style>
